Сервисы в помощь веб-дизайнеру — Сентябрь 2016

Последняя подборка ресурсов для веб-дизайнера была опубликована пару месяцев назад в марте. Самое время вернуться к данной теме и рассказать вам о нескольких новых полезных сервисах, упрощающих работу специалистов по веб-дизайну. Сегодня в выпуске: генераторы фавиконок и email писем, сайты для текстов, CSS и цветовой палитры.

Inkbrush

Inkbrush – очередной инструмент от MovableInk, позволяющий за несколько минут генерировать код эффектного, красивого электронного письма, которое можно будет прочитать на любом устройстве.

Сначала нужно загрузить файл с изображениями, которые будут использоваться в письме. На этом этапе выбирается дизайн для мобильного или стационарного устройства. Затем осуществляется разметка и форматирование, регулируется размер каждого элемента, их взаимное расположение.

Готовое письмо экспортируется на сайт провайдера почтовых услуг, веб-сервис, или копируется его HTML-код для последующего использования.

ProCSSor

ProCSSor от MaxCDNtools – инструмент для работы с CSS (каскадными таблицами стилей), придания им читабельного, удобного для восприятия вида. В специальном окне на сайте можно ввести или вставить скопированный из другого источника текст CSS, а потом с помощью набора настроек отформатировать его.

Задаются свойства правил, стиль скобок, параметры отступа, порядок расположения селекторов (в одной или в отдельных строках), расположение селекторов относительно правил (слева или справа), количество уровней отступов и другие параметры. Каждый пункт сопровождается разъяснениями-иллюстрациями.

Favigen

Favigen – сервис генератор фавиконок (Favicons), то есть значков-иконок для сайтов, которые отображаются на закладках в браузере и в результатах выдачи поисковой системы. Достаточно загрузить на сайт файл с изображением, выбрать размер фавикона (16, 32 или 64 пикселя) и нажать кнопку «Создать».

Ниже появиться готовый значок, который можно сохранить через контекстное меню или загрузить с помощью кнопки справа. Полученный файл нужно переименовать в favicon.ico и добавить в корневую папку, а затем вставить сгенерированный код, чтоб привязать фавикон к сайту, для которого он создан.

0to255

Простой инструмент 0to255 используется для подбора оттенков определенного цвета. Есть 2 способа его применения: можете ввести в окошке код цвета, оттенки которого вам нужно получить, или выбрать один из вариантов на приведенной ниже раскладке (в ней представлено 140 цветов, расположенных в случайном порядке).

После выбора откроется таблица, где представлено 32 оттенка разной степени насыщенности, первый и последний элементы для всех цветов одинаковые — это белый и черный. Кликнув по выбранному оттенку, можно скопировать его код в буфер обмена и использовать в дальнейшей работе. Очень удобно и быстрее чем в фотошопе. Нечто похожее есть в таблицах веб-цветов от W3Schools.

Csswarp

Оригинальный сервис Csswarp пригодится для расположения текста по кривой заданной формы. В окошко вводится нужный текст, выбирается тип линии – кривая или окружность, и по желанию добавляются изгибы кривой. Затем нажимается кнопка WARPIT (то есть «искривить»).

Фраза появится на поле справа, с помощью набора маркеров можно изменять конфигурацию кривой, увеличивать диаметр окружности и перемещать ее по экрану. Также доступен набор инструментов для выбора шрифта, размера букв и интервала между ними, создания разных эффектов. Когда нужный результат достигнут, нажимается кнопка генерирования кода. На выходе получаете готовый HTML+CSS код.

Если вы знаете интересные сервисы в помощь веб-дизайнеру, присылайте нам ссылки в комментариях — добавим их обзоры в следующих выпусках.